<!--vue模板-->
<template>
  <el-dialog
    :model-value="visible"
    title="选择产品"
    width="800"
    :close-on-click-modal="false"
    @close="close"
  >
    <div>
      <el-input
        v-model="productname"
        placeholder="请输入产品名称"
        style="width: 200px"
      />
      <el-button type="primary" @click="initData" style="margin-left: 15px">搜索</el-button>
      <el-button type="info">重置</el-button>
    </div>

    <!--客户列表-->
    <el-table
      ref="chooseTable"
      :data="tableData"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column
        type="selection"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="productnumber"
        label="产品编号"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column prop="name" label="产品名称" header-align="center" align="center"/>
      <el-table-column prop="price" label="产品价格" header-align="center" align="center"/>
      <el-table-column
        prop="model"
        label="型号"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="producetype"
        label="产品类型"
        width="180"
        header-align="center"
        :formatter="formatProductType"
        align="center"
      />
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>

    <div style="text-align: right">
      <el-button type="primary" @click="saveDict">选择</el-button>
      <el-button type="info" @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { queryProduct } from "@/api/product.js";
import { ElMessage } from "element-plus";

const chooseTable = ref();

//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false //默认值
  }
});

const tableData = ref([]);
//声明事件   需要父组件监听
const emits = defineEmits(["close", "choose"]);
//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
const productname = ref("");
//格式化产品类型
function formatProductType(row, column, cellValue) {
  switch (cellValue) {
    case 1:
      return "反击破产品";
    case 2:
      return "鄂破产品";
    case 3:
      return "圆锥类产品";
  }
}
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}

//关闭对话框回调
function close() {
  //触发关闭事件 通知父组件
  emits("close");
}

async function initData() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    productname: productname.value
  };
  let res = await queryProduct(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//保存
function saveDict() {
  //获取选中的行
  let rows = chooseTable.value.getSelectionRows();
  //触发选择事件 将数据传递给父组件
  emits("choose", rows);
  close();
}

onBeforeMount(() => {
  initData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
